<template>
  <div>
    <a-alert v-if="visible" :message="message" :after-close="handleArticleClose" type="info" closable banner />
    <a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="blogList">
      <template #renderItem="{ item }">
        <a-list-item key="item.title">
          <template #extra>
            <a target="_blank" :href="item.visitUrl">
              <img width="120" alt="logo" :src="item.articleImageUrl" />
            </a>
          </template>
          <a-list-item-meta :description="item.abstract">
            <template #title>
              <a target="_blank" :href="item.visitUrl">{{ item.title }}</a>
            </template>
            <template #avatar><a-avatar src="https://cdn.jiubanqingchen.cn/qc.jpg" /></template>
          </a-list-item-meta>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>
<script lang='ts'>
import { defineComponent, onMounted, reactive, Ref, ref, toRefs } from 'vue'
import { useI18n } from 'vue-i18n'
import { List, ListItem, ListItemMeta } from 'ant-design-vue'
import { getBlogList } from '/@/api/external/jxhx/blog'
export default defineComponent({
  name: 'UserWorkArticle',
  components: {
    [List.name]: List,
    [ListItem.name]: ListItem,
    [ListItemMeta.name]: ListItemMeta,
  },
  emits: ['changeArticleCount'],
  setup(props, { emit }) {
    const { t } = useI18n()

    const blogList: Ref<Array<any>> = ref([])

    const alertState = reactive({
      visible: true,
      message: t('dashboard.user-info.userWork.articleAlertMessage'),
      handleArticleClose: () => {
        alertState.visible = false
      },
    })

    const pagination = {
      pageSize: 10,
    }

    onMounted(() => {
      getBlogList().then((res) => {
        blogList.value = res.data.data || []
        emit('changeArticleCount', blogList.value.length)
      })
    })
    return {
      pagination,
      blogList,
      ...toRefs(alertState),
    }
  },
})
</script>
<style lang='less' scoped>
</style>